<template>
	<block>
		<hxt-layout id="hxt-layout" title="图片" svc="img" initTitle="图片加载失败" @initPage="initPage">
			<view class="hxt-flex-column" style="background-color: #fff;">
				<view class="hxt-flex-fill" style="overflow: hidden;">
					<hxt-scroll ref="scrollEL" id="scrollEL" scroll-y style="height:100%;" scroll-with-animation="true"
						enable-back-to-top="true" :enhanced="true" :bounces="false" @loadData="loadData">
						<view class="grid col-2" style="padding: 0 20rpx;">
							<view class="padding-sm image" v-for="(item,index) in list" :key="index">
								<van-image fit="widthFix" lazy-load :src="item.miUrl" width="100%"
									@click="show(item.miUrl)">
								</van-image>
								<!-- <image v-if="item" :src="item" mode="aspectFill" @click="show(item)"></image> -->
							</view>
						</view>
					</hxt-scroll>
				</view>
				<van-tabbar :active="active" @change="change" :safe-area-inset-bottom="false" :fixed="false">
					<van-tabbar-item v-for="(item,index) in urlList" :name="item.id" :key="index" :icon="item.icon">
						{{item.text}}
					</van-tabbar-item>
				</van-tabbar>
			</view>
		</hxt-layout>
		<hxt-loading id="hxt-loading"></hxt-loading>
	</block>
</template>

<script>
	import hxt from "@/utils/hxt.js"
	export default {
		data() {
			return {
				list: [],
				urlList: [],
				active: 0,
				query: {
					pageIndex: 1,
					pageSize: 30,
					rowCount: 0
				}
			}
		},
		watch: {
			active: function(val) {
				var _this = this;
				_this.loadData(false);
			},
		},
		onShow: function(e) {},
		methods: {
			initPage: function(e) { //初始化事件
				var _this = this;
				hxt.post({
					url: hxt.domain + 'pc/mediaInfoTitle',
					data: {
						type: 2
					},
					ok: function(res) {
						if (res.data.code != 0) {
							if (!!e.callBack) e.callBack(res.data.errmsg);
							return;
						};
						_this.urlList = res.data.data;
						var obj = res.data.data.find(function(item) {
							return item.isMain == 1
						});
						if (obj) {
							_this.active = obj.id;
						};
					},
					fail: function(res) {
						if (!!e.callBack) e.callBack(res.errMsg);
					}
				});
			},
			loadData: function(e) {
				var _this = this;
				var obj = _this.urlList.find(function(item) {
					return item.id == _this.active;
				});
				if (!e || e.refresh) {
					_this.query.pageIndex = 1;
					_this.list = [];
				}
				hxt.post({
					url: hxt.domain + 'wx/mediaInfoList',
					data: {
						miGroupKey: obj.groupKey,
						pageSize: _this.query.pageSize,
						pageIndex: _this.query.pageIndex
					},
					ok: function(res) {
						if (res.data.code != 0) {
							hxt.Notify({
								type: 'danger',
								message: '加载失败：' + res.data.errmsg + '，请稍后重试！'
							});
							_this.$refs.scrollEL.refreshDone(false);
							return;
						};
						var data = res.data.data;
						_this.list = _this.list.concat(data.list);
						_this.$refs.scrollEL.refreshDone(_this.query.pageIndex < Math.ceil(data.rowCount /
							data.pageSize));
						_this.query.pageIndex++;
					},
					fail: function(res) {
						hxt.Notify({
							type: 'danger',
							message: '加载失败：' + res.errMsg + '，请稍后重试！'
						});
						_this.$refs.scrollEL.refreshDone(false);
					}
				});
			},
			change: function(e) {
				this.active = e.detail;
			},
			show: function(url) {
				var _this = this,
					list = _this.list.map(function(item) {
						return item.miUrl;
					});
				wx.previewImage({
					current: url, // 当前显示图片的http链接
					urls: list // 需要预览的图片http链接列表
				});
			},
		}
	}
</script>

<style>

</style>
